<template>

	<div class="mainContent">
		<div class="bread-nav">
			<span class="bread-item">商品管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">商品属性</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item activeNavs" @click="backStyleInfo">商品列表</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">添加标签</span>
		</div>
		<!--  -->
		<div class="detialsCont">
			<el-row>
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">可选标签</div>
				</div>
			</el-row>
			<el-row class="addLabelCont">
				<a class="mdlCont">
					<ul class="addLabelUl">
						<li class="labelItem" v-for="(list,index) in Model.listData" :key="index" v-show="index < Model.showLength">
							<div class="labelTitle">
								<img src="@/assets/img/icon_label.png" alt="">
								<p class="vel">{{list.name}}</p>
							</div>
							<div class="labelCheck">
								<el-checkbox-group v-model="Model.bindArr">
									<el-checkbox :label="item.id" name="type" v-for="(item,idx) in list.systemTags" :key="idx">{{item.name}}</el-checkbox>
								</el-checkbox-group>
							</div>
						</li>
						<li v-if="Model.listData.length > Model.showLength" class="more">
							<span @click="showMoreOption">更多选项</span>
							<img src="@/assets/img/down_gray.png" alt="">
						</li>
						<li v-else class="more">
							<span @click="collapseOption">收起</span>
							<img src="@/assets/img/down_gray.png" alt="">
						</li>
					</ul>
					<!--  -->
					<div class="confirm-btn-group">
						<span class="confirm-btn item-btn" @click="updataTags">确认</span>
						<span class="cancel-btn item-btn" @click="backStyleInfo">取消</span>
					</div>
				</a>
			</el-row>

		</div>
	</div>
</template>

<script>
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: 'labelDetail',
		mixins: [Model, Controller],
		components: {

		},
		props: [
			''
		],
		created() {
			this.init();
		},
		mounted() {

		},
	}
</script>

<style scoped lang="less">
	@import "./index.less";
</style>
